<template>
  <div class="mt-3 flex w-full">
    <div class="mr-3 flex-1">
      <a-form layout="inline" :model="searchForm">
        <a-form-item label="所属机构">
          <a-tree-select
            v-model:value="searchForm.companyNode"
            tree-node-filter-prop="label"
            style="width: 260px"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :tree-data="comanyList"
            placeholder="请选择归属机构"
            @change="onComany"
            allowClear
          />
        </a-form-item>
        <a-form-item label="小区">
          <a-select
            style="width: 150px"
            placeholder="请选择小区"
            :options="villageList"
            v-model:value="searchForm.villageNode"
            allowClear
          />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="onSearch"
            ><SearchOutlined />查询</a-button
          >
        </a-form-item>
        <a-form-item>
          <a-button
            type="primary"
            @click="onMigration"
            :disabled="selectedRowKeys.length <= 0"
            ><SwapOutlined />确认迁移</a-button
          >
        </a-form-item>
      </a-form>
      <a-table
        :columns="columns"
        :data-source="dataSource"
        :pagination="pagination"
        class="mt-3"
        rowKey="villageId"
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
        }"
      />
    </div>
    <div class="ml-3 flex-1">
      <a-form layout="inline" :model="searchForm2">
        <a-form-item label="所属机构">
          <a-tree-select
            v-model:value="searchForm2.companyNode"
            tree-node-filter-prop="label"
            style="width: 260px"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :tree-data="comanyList"
            placeholder="请选择归属机构"
            @change="onComany2"
            allowClear
          />
        </a-form-item>
        <a-form-item label="换热站">
          <a-select
            style="width: 150px"
            v-model:value="searchForm2.heatExchangeStationNode"
            :options="heatingList"
            placeholder="请选择换热站"
            allowClear
          />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="onSearch2"
            ><SwapOutlined />迁移预览</a-button
          >
        </a-form-item>
      </a-form>
      <a-table
        :columns="columns2"
        :data-source="dataSource2"
        :pagination="pagination2"
        class="mt-3"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { SwapOutlined, SearchOutlined } from '@ant-design/icons-vue';
import {
  getBelongingInstitution,
  getBelongingInstitutionVillage,
  getBelongingInstitutionHeatStation,
  getBelongingInstitutionVillageName,
  getBelongingInstitutionVillageName_two,
  getMigrationInformationPage,
} from '#/api/core/customerInformation';
import { message } from 'ant-design-vue';

const searchForm = reactive({
  companyNode: '',
  villageNode: '',
  heatExchangeStationNode: '',
});
const searchForm2 = reactive({
  companyNode: '',
  villageNode: '',
  heatExchangeStationNode: '',
});
const comanyList = ref([]);
const getComanyList = () => {
  getBelongingInstitution().then((res: any) => {
    console.log(res);
    // 递归处理树形数据，保持层级结构
    const processTreeData = (tree: any[]): any[] => {
      // console.log(tree)
      return tree.map((item: any) => {
        const processedItem = {
          key: item.id,
          label: item.title,
          level: item.level,
          value: item.id,
          isLeaf: item.children && item.children.length > 0 ? false : true,
          children: [],
        };

        // 如果存在children，递归处理子节点
        if (item.children && item.children.length > 0) {
          processedItem.children = processTreeData(item.children);
        }

        return processedItem;
      });
    };

    const treeData = processTreeData([res.data]);
    comanyList.value = treeData;
  });
};
getComanyList();
const villageList = ref([]);
const heatingList = ref([]);
const selectedRowKeys = ref<any[]>([]);
const getVillageList = (companyNode: any) => {
  getBelongingInstitutionVillage(companyNode).then((res: any) => {
    console.log(res);
    villageList.value = res.data.data.map((item) => {
      return {
        label: item.title,
        value: item.id,
      };
    });
  });
};
const onComany = (e: any) => {
  console.log(e);
  getVillageList(e);
};
const onComany2 = (e: any) => {
  console.log(e);
  getBelongingInstitutionHeatStation(e).then((res: any) => {
    console.log(res);
    heatingList.value = res.data.data.map((item) => {
      return {
        label: item.title,
        value: item.id,
      };
    });
  });
};
const dataSource = ref([]);
const columns = [
  {
    title: '所属机构',
    dataIndex: 'affiliation',
    key: 'affiliation',
    align: 'center',
  },
  {
    title: '所属换热站',
    dataIndex: 'heatExchangeStationName',
    key: 'heatExchangeStationName',
    align: 'center',
  },
  {
    title: '小区名称',
    dataIndex: 'villageName',
    key: 'villageName',
    align: 'center',
  },
];
const pagination = reactive({
  total: 0,
  pageSize: 10,
  current: 1,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条`,
  onChange: (page: number, pageSize: number) => {
    pagination.current = page;
    pagination.pageSize = pageSize;
    onSearch();
  },
});
const dataSource2 = ref([]);
const columns2 = [
  {
    title: '所属机构',
    dataIndex: 'affiliation',
    key: 'affiliation',
    align: 'center',
  },
  {
    title: '所属换热站',
    dataIndex: 'heatExchangeStationName',
    key: 'heatExchangeStationName',
    align: 'center',
  },
  {
    title: '小区名称',
    dataIndex: 'villageName',
    key: 'villageName',
    align: 'center',
  },
];
const pagination2 = reactive({
  total: 0,
  pageSize: 10,
  current: 1,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条`,
  onChange: (page: number, pageSize: number) => {
    pagination.current = page;
    pagination.pageSize = pageSize;
    onSearch2();
  },
});
const onSearch = () => {
  getBelongingInstitutionVillageName(
    searchForm.companyNode,
    searchForm.villageNode,
  ).then((res: any) => {
    console.log('左', res);
    dataSource.value = res.data.data.data;
    pagination.total = res.data.data.total;
  });
};
const onSearch2 = () => {
  getBelongingInstitutionVillageName_two(
    searchForm2.villageNode,
    searchForm2.heatExchangeStationNode,
  ).then((res: any) => {
    console.log('右', res);
    dataSource2.value = res.data.data.data;
    pagination2.total = res.data.data.total;
  });
};
const onSelectChange = (Keys: any[]) => {
  selectedRowKeys.value = Keys;
  console.log(selectedRowKeys.value);
};
const onMigration = () => {
  getMigrationInformationPage(
    selectedRowKeys.value,
    searchForm.heatExchangeStationNode,
  ).then((res: any) => {
    if (res.data.data.code == 200) {
      message.success(res.data.data.data);
      onSearch();
    } else {
      message.error('迁移失败');
    }
  });
};
</script>
<style scoped></style>
